<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#fff"></nav-bars>
		<view class="wrap" :style="{background: 'url('+bg+')',backgroundSize:'100% 100%'}">
			<view class="top-column">
				<view class="nav"></view>
				<view class="title">
					<text>{{info.name}}</text>
				</view>
				<view class="activityRule" @click="goSkip('/pages_activity/pages/article/ruleDetails?id='+id)">
					活动规则
				</view>
			</view>
			<!-- <view class="wrap-luckDraw"></view> -->
			<view class="gradualBg">
				<view class="rankingList">
					<view class="box in-area">
						<view class="column">
							<image :src="imageSrc+'/static/activity/circle_left.png'" class="sidebar_a"></image>
							<text>参与人员</text>
							<image :src="imageSrc+'/static/activity/circle_right.png'" class="sidebar_b"></image>
						</view>
						<scroll-view scroll-y="true" class="scroll-Y wrap-list" @lower-threshold='50'
							@scrolltolower="lower" v-if="nameList.length>0">
							<view class="list" v-for="(item ,index) in nameList" :key="index">
								<view class="sidebar_a">
									<image :src="item.headimg"></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="sidebar_b">
									<text>{{$common.hideTel(item.mobile)}}</text>
								</view>
								<view class="sidebar_c">
									{{$common.timestampDate(item.receive_at)}}
								</view>
							</view>
						</scroll-view>
						<view class="notList" v-else>
							<image :src="`${imageSrc}/static/constr/notList.png`" mode=""></image>
							敬请期待
						</view>
					</view>
				</view>
				<view class="rankingList" v-if="winningList.length>=9">
					<view class="box in-area">
						<view class="column">
							<image :src="imageSrc+'/static/activity/circle_left.png'" class="sidebar_a"></image>
							<text>中奖名单</text>
							<image :src="imageSrc+'/static/activity/circle_right.png'" class="sidebar_b"></image>
						</view>
						<view class="wrap-list">
							<swiper class="swiper" circular="true" vertical="true" display-multiple-items="9"
								:autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item v-for="(items ,index) in winningList" :key="index">
									<view class="swiper-items">
										<image :src="items.headimg"></image>
										<view class="block-item nickname">{{$common.hideTel(items.mobile)}}</view>
										<view class="block-item level">{{items.name}}</view>
										<view class="block-item right">{{$common.timestampDate(items.created_at)}}</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				<view class="rankingList" v-else-if="winningList.length>0 && winningList.length<9">
					<view class="box in-area">
						<view class="column">
							<image :src="imageSrc+'/static/activity/circle_left.png'" class="sidebar_a"></image>
							<text>中奖名单</text>
							<image :src="imageSrc+'/static/activity/circle_right.png'" class="sidebar_b"></image>
						</view>
						<view class="wrap-list">
							<view class="swiper">
									<view class="swiper-items" style="margin-bottom: 18rpx;" v-for="(items ,index) in winningList" :key="index">
										<image :src="items.headimg"></image>
										<view class="block-item nickname">{{$common.hideTel(items.mobile)}}</view>
										<view class="block-item level">{{items.name}}</view>
										<view class="block-item right">{{$common.timestampDate(items.created_at)}}</view>
									</view>
							</view>
						</view>
					</view>
				</view>
				<view class="prize-area">
					<view class="box in-area">
						<view class="column">
							<image :src="imageSrc+'/static/activity/circle_left.png'" class="sidebar_a"></image>
							<text>参与方式</text>
							<image :src="imageSrc+'/static/activity/circle_right.png'" class="sidebar_b"></image>
						</view>
						<view class="msg-details">
							<u-parse :html="info.content"></u-parse>
						</view>
					</view>
				</view>

				<view class="footer">
					<view class="bgBox"></view>
					<view class="copyright">本次活动的最终解释权归融易装所有</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import activity from '@/service/activity.js'
	export default {
		components: {},
		data() {
			return {
				//bg: this.$static + '/static/activity/168bg.png',
				bg: '',
				startBtn: this.$static + '/static/activity/luck_draw.png',
				gift: this.$static + '/static/activity/gift.png',
				imageSrc: this.$static,
				navBackground: '',
				ratio: [],
				prizeList: [],
				page: 1,
				pagesize: 10,
				luckDrawList: [],
				id: '',
				prize_name: '',
				info: '', //活动详情
				nameList: [], //活动人员列表
				autoplay: true,
				interval: 800,
				duration: 2000,
				winningList: [],
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
			// this.getNameList(); //活动人员列表
			this.getWinningList(); //中奖名单
		},
		onShareAppMessage(res) {
			uni.showShareMenu({
				withShareTicket: true
			})
			if (res.from === 'menu') {}
			return {
				title: '活动详情',
				//imageUrl: this.goodsInfo.round_imgs[0].image_path,
				imageUrl: this.bg,
				path: '/pages/theme/activityItem?id=' + this.id + '&share_uid=' + this
					.userId,
				success: function(res) {
					console.log('成功', res);
				}
			};


		},
		onShareTimeline(res) {
			if (res.from === 'menu') {}
			return {
				title: '活动详情',
				imageUrl: this.bg,
				path: '/pages/theme/activityItem?id=' + this.id + '&share_uid=' + this
					.userId,
				success: function(res) {
					console.log('成功', res);
				}
			};

		},
		methods: {
			goTabBar(url) {
				uni.switchTab({
					url: url
				});
			},
			lower(e) {
				this.page++;
				this.getNameList();
			},
			goSkip(url) {
				this.$common.navigateTo(url);
			},
			getPrizeParame() {
				let arr = this.prizeList;
				arr.forEach((item, index) => {
					console.log(item.prize_img)
					this.data.forEach(item1 => {
						if (item1.id === item.sort) {
							item1.images = item.prize_img;
							item1.name = item.config_name;
							return;
						}
					})
				})
				var ratioArr = [];
				arr.forEach((item, index) => {
					if (item.prize_stock > 0) { //库存大于0
						ratioArr.push(item.ratio)
					}
				})
				this.ratio = ratioArr;
			},
			//得到的奖品
			getWritePrize(prize_id) {
				activity.writePrize({
						prize_id: prize_id,
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						let _this = this;
						if (res.code == 1) {
							var title = this.prize_name;

						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {

					})
			},
			getInfo() {
				uni.showLoading()
				activity.activityBaseInfo({
						item_id: this.id,
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if(res.code == -1) {
							_this.$common.errorToShow('活动不存在或已暂停');
							uni.navigateBack({
							    delta: 1
							});
						}else{
							_this.info=res.data;
							_this.bg=res.data.img[0].path;
							if(res.code===0){
								_this.$common.errorToShow(res.msg);
								uni.navigateBack({
								    delta: 1
								});
							}
						}
					})
					.catch(err => {
						// uni.showToast({
						// 	title: '哎呀网络走丢了，请稍后再试~',
						// 	icon: 'none',
						// 	duration: 3000
						// });
						uni.hideLoading()
					})
			},
			getNameList() {
				uni.showLoading()
				activity.activityNameList({
						page: this.page,
						pagesize: this.pagesize,
						activity_no: this.id,
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1) {
							let data = res.data.users;
							for (var i = 0; i < data.length; i++) {
								_this.nameList.push(data[i]); // 加载的数据追加在上一页后面
							}
						} else {

						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			//中奖名单
			getWinningList() {
				activity.winningList({
						activity_no: this.id,
					})
					.then(res => {
						let _this = this;
						if (res.code == 1 && res.data.length > 0) {
							let data = res.data;
							_this.winningList = data;
						} else {
							//_this.winningList = [];
						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;

		.wrap {
			width: 100%;
			height: 100%;
			// min-height: 100vh;
			position: absolute;
			top: 0;
			padding-bottom: 200rpx;

			.top-column {
				width: 100%;
				height: 0;
				padding-bottom: 50%;

				.nav {
					width: 100%;
					height: 10rpx;
					display: block;
				}

				.title {
					width: 410rpx;
					height: 57rpx;
					margin: auto;
					margin-top: 65%;
					background: #ffffff;
					box-shadow: 3px 4px 10px 0px rgba(238, 63, 0, 0.5), -2px -2px 3px 0px rgba(255, 211, 93, 0.8);
					border-radius: 29rpx;
					text-align: center;
					line-height: 57rpx;
					color: #FF3000;
				}

				.activityRule {
					position: absolute;
					width: 160rpx;
					height: 58rpx;
					left: 0;
					top: 10%;
					color: #FF3000;
					line-height: 58rpx;
					text-align: center;
					background: #FFEE49;
					border-radius: 0px 20rpx 20rpx 0px;
				}
			}


			.wrap-luckDraw {
				margin-top: 204rpx;
				width: auto;
				height: 680rpx;

				.box {
					width: 580rpx;
					height: 510rpx;
					display: flex;
					margin: auto;
					flex-wrap: wrap;
					justify-content: space-around;
					align-items: center;

					.box_item {
						width: 172rpx;
						height: 154rpx;
						background-color: #fff;
						padding-bottom: 2rpx;
						color: #FF5118;
						//align-items: center;
						justify-content: center;
						border-radius: 24rpx;
						font-size: 24rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding: 0 8rpx 0 8rpx;

						.prizeIcon {
							width: 108rpx;
							height: 90rpx;
							margin: 10rpx auto;
						}

						&:nth-child(5) {
							color: #fff;
						}
					}

					.active {
						background-color: rgba(0, 0, 0, .5);
					}
				}
			}

			.luckdraw-num {
				width: 459rpx;
				height: 72rpx;
				margin: 20rpx auto;
				background: #FA3E3F;
				border-radius: 10rpx;
				line-height: 72rpx;
				text-align: center;
				color: #fff;
			}

			.gradualBg {
				width: 100%;
				position: absolute;
				height: auto;
				margin-top: 35%;
				background: linear-gradient(-6deg, #ff7847, #ff7847);

				.prize-area {
					width: 703rpx;
					height: auto;
					background: #F46F45;
					border-radius: 20rpx;
					margin: auto;
					margin-top: 28rpx;
					display: flex;
					padding: 20rpx 0 20rpx 0;
					align-items: center;

					.box {
						width: 669rpx;
						height: auto;

						.prize-item {
							width: 468rpx;
							height: 95rpx;
							margin: 42rpx auto;
							display: flex;
							font-size: 30rpx;
							justify-content: space-between;
							align-items: center;
							flex-wrap: wrap;
							color: #F66436;

							image {
								width: 92rpx;
								height: 92rpx;
								margin-bottom: 4rpx;
							}

							text {
								font-size: 24rpx;
								color: #989898;
							}
						}

						.prizeBtn {
							width: 290rpx;
							height: 60rpx;
							margin: auto;
							text-align: center;
							line-height: 60rpx;
							color: #fff;
							background: #F56134;
							border-radius: 29rpx;
						}
					}

					.msg-details {
						width: 94%;
						margin: auto;
						padding-bottom: 20rpx;

						.tag {

							.box-li {
								display: flex;
								align-items: center;

								.sequence {
									width: 22rpx;
									height: 22rpx;
									background: #FF3F12;
								}

								.title {
									width: 111rpx;
									height: 28rpx;
									font-size: 28rpx;
									margin-left: 18rpx;
									font-weight: bold;
									color: #351101;
									line-height: 28rpx;
								}

							}

							.area-text {
								width: 90%;
								margin: 20rpx auto;

								text {
									width: 100%;
									margin-bottom: 20rpx;
									max-height: 150rpx;
									display: block;
								}
							}
						}
					}
				}

				.in-area {
					margin: auto;
					background: #FEFCFA;
					border-radius: 20rpx;

					.column {
						width: 450rpx;
						height: auto;
						margin: 38rpx auto;
						line-height: 24rpx;
						display: flex;
						font-size: 30rpx;
						justify-content: space-between;
						align-items: center;
						color: #F66436;

						image {
							width: 57rpx;
							height: 20rpx;
						}

						text {
							width: 306rpx;
							height: 72rpx;
							background: #FFC628;
							line-height: 72rpx;
							text-align: center;
							border-radius: 36rpx;
						}
					}
				}

				.rankingList {
					width: 703rpx;
					height: 750rpx;
					background: #F46F45;
					border-radius: 20rpx;
					margin: auto;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.box {
						width: 669rpx;
						height: 720rpx;

						.wrap-list {
							width: 94%;
							margin: 20rpx auto;
							height: 564rpx;
							overflow: hidden;

							.swiper {
								width: 100%;
								// height: 200px;
								line-height: 50rpx;

								.swiper-items {
									width: 100%;
									display: flex;
									align-items: center;
									height: 100%;

									image {
										width: 48rpx;
										height: 48rpx;
										margin-right: 20rpx;
									}

									.block-item {
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.nickname {
										width: 30%;
									}

									.level {
										width: 40%;
										text-align: center;
										color: #9F6440;
									}

									.right {
										width: 27%;
										margin-left: auto;
									}
								}
							}

							.list {
								width: 100%;
								height: 72rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.sidebar_a {
									width: 38%;
									display: flex;
									align-items: center;

									image {
										width: 46rpx;
										height: 46rpx;
										margin-right: 20rpx;
									}

									text {
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.sidebar_b {
									width: 30%;
									color: #9F6440;
									margin: auto;
									overflow: hidden;
									text-align: left;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.sidebar_c {
									width: 25%;
									text-align: center;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}
					}
				}

			}
		}

		.footer {
			width: 100%;
			margin-top: 48rpx;

			.bgBox {

				height: 84rpx;
				background: rgba(255, 255, 255, 0.59);
				opacity: 0.2;
			}

			.copyright {
				width: 100%;
				position: absolute;
				text-align: center;
				line-height: 84rpx;
				left: 50%;
				transform: translate(-50%, -92rpx);
				font-weight: 500;
				color: #FFDED4;
			}
		}

		// 没有数据
		.notList {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 240rpx auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 426rpx;

			image {
				width: 426rpx;
				height: 356rpx;
				margin-bottom: 40rpx;
			}

			font:500 40rpx/56rpx PingFang SC;
			color: #333;
		}
	}
</style>
